<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>字典包配置 | vue3-element-dict</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="/vue3-element-dict/favicon.ico">
    <script defer="defer" async="async" src="https://cpro.baidustatic.com/cpro/ui/cm.js"></script>
    <meta name="description" content="vue3-element-dict字典包官方使用文档">
    
    <link rel="preload" href="/vue3-element-dict/assets/css/0.styles.597c269b.css" as="style"><link rel="preload" href="/vue3-element-dict/assets/js/app.a8f3ef49.js" as="script"><link rel="preload" href="/vue3-element-dict/assets/js/4.2b31fab0.js" as="script"><link rel="preload" href="/vue3-element-dict/assets/js/34.66b713bf.js" as="script"><link rel="prefetch" href="/vue3-element-dict/assets/js/1.de614e96.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/10.2f2bf95a.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/11.ff41966b.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/12.b8277606.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/13.e2b7389c.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/14.03b2a24a.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/15.48e830e3.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/16.9911089d.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/17.a406aa87.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/18.e37f88cf.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/19.a9d7404f.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/2.53443f2d.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/20.cbba67a5.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/21.a5a4b2b5.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/22.8b3228db.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/23.c5c8d87f.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/24.fccc0622.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/25.01db42e3.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/26.faa5aea5.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/27.80a1c84f.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/28.4e76294f.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/29.f17d3fa2.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/30.387eaec1.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/31.43362735.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/32.722ec58d.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/33.bfdcc632.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/35.1b7e7bfc.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/36.eec5a086.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/37.f5704977.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/5.0ef459b8.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/6.d8b0c3f6.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/7.08430ef6.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/8.d5c78b56.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/9.cbf8f2c2.js">
    <link rel="stylesheet" href="/vue3-element-dict/assets/css/0.styles.597c269b.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue3-element-dict/" class="home-link router-link-active"><!----> <span class="site-name">vue3-element-dict</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue3-element-dict/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/vue3-element-dict/guide/" class="nav-link router-link-active">
  指南
</a></div><div class="nav-item"><a href="https://www.npmjs.com/package/vue3-element-dict" target="_blank" rel="noopener noreferrer" class="nav-link external">
  npm地址
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue3-element-dict/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/vue3-element-dict/guide/" class="nav-link router-link-active">
  指南
</a></div><div class="nav-item"><a href="https://www.npmjs.com/package/vue3-element-dict" target="_blank" rel="noopener noreferrer" class="nav-link external">
  npm地址
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>捐赠</span> <!----></p> <!----></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>指南</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue3-element-dict/guide/" aria-current="page" class="sidebar-link">介绍</a></li><li><a href="/vue3-element-dict/guide/fast/" class="sidebar-link">快速开始</a></li><li><a href="/vue3-element-dict/guide/directory-structure/" class="sidebar-link">目录结构</a></li><li><a href="/vue3-element-dict/guide/config/" aria-current="page" class="active sidebar-link">字典包配置</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue3-element-dict/guide/config/#常见问题" class="sidebar-link">常见问题</a></li></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>普通字典组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue3-element-dict/components/el-select-dict/" class="sidebar-link">select-dict选择器</a></li><li><a href="/vue3-element-dict/components/el-radio-dict/" class="sidebar-link">radio-dict单选框</a></li><li><a href="/vue3-element-dict/components/el-checkbox-dict/" class="sidebar-link">checkbox-dict多选框</a></li><li><a href="/vue3-element-dict/components/el-radio-button-dict/" class="sidebar-link">radio-button-dict单选框</a></li><li><a href="/vue3-element-dict/components/el-checkbox-button-dict/" class="sidebar-link">checkbox-button-dict多选框</a></li><li><a href="/vue3-element-dict/components/el-tabs-dict/" class="sidebar-link">tabs-dict标签页</a></li><li><a href="/vue3-element-dict/components/el-tag-dict/" class="sidebar-link">tag-dict标签</a></li><li><a href="/vue3-element-dict/components/el-check-tag-dict/" class="sidebar-link">check-tag-dict标签</a></li><li><a href="/vue3-element-dict/components/el-link-dict/" class="sidebar-link">link-dict链接</a></li><li><a href="/vue3-element-dict/components/el-text-dict/" class="sidebar-link">text-dict链接</a></li><li><a href="/vue3-element-dict/components/el-button-dict/" class="sidebar-link">button-dict链接</a></li><li><a href="/vue3-element-dict/components/el-table-colmun-dict/" class="sidebar-link">el-table-colmun-dict表格</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>树形字典组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue3-element-dict/components/el-cascader-dict/" class="sidebar-link">cascader-dict联级选项</a></li><li><a href="/vue3-element-dict/components/el-tree-dict/" class="sidebar-link">tree-dict树菜单</a></li><li><a href="/vue3-element-dict/components/el-tree-select-dict/" class="sidebar-link">tree-select-dict树菜单</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>过滤器</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue3-element-dict/filters/dict/" class="sidebar-link">字典过滤器</a></li><li><a href="/vue3-element-dict/filters/tree-dict/" class="sidebar-link">树形字典过滤器</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>方法</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue3-element-dict/functions/dict/" class="sidebar-link">字典方法</a></li><li><a href="/vue3-element-dict/functions/other/" class="sidebar-link">其他方法</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="字典包配置"><a href="#字典包配置" class="header-anchor">#</a> 字典包配置</h1> <p><a href="/vue3-element-dict/guide/directory-structure/">目录结构</a>这篇文章中字典配置文件涉及到字典配置，此篇文章详细介绍可配置项。</p> <p>src下新建文件dict-config.ts，用于配置字典包相关配置。配置项如下</p> <table><thead><tr><th style="text-align:center;">字段</th> <th style="text-align:center;">类型</th> <th style="text-align:center;">必传</th> <th style="text-align:left;">说明</th> <th style="text-align:center;">默认值</th></tr></thead> <tbody><tr><td style="text-align:center;">getDictCodeApi</td> <td style="text-align:center;">Promise</td> <td style="text-align:center;">是</td> <td style="text-align:left;">请求字典接口</td> <td style="text-align:center;">—</td></tr> <tr><td style="text-align:center;">version</td> <td style="text-align:center;">String</td> <td style="text-align:center;">是</td> <td style="text-align:left;">当前字典包版本号 必传</td> <td style="text-align:center;">—</td></tr> <tr><td style="text-align:center;">localDictCodes</td> <td style="text-align:center;">Object</td> <td style="text-align:center;">否</td> <td style="text-align:left;">本地字典数据</td> <td style="text-align:center;">{}</td></tr> <tr><td style="text-align:center;">versionKey</td> <td style="text-align:center;">String</td> <td style="text-align:center;">否</td> <td style="text-align:left;">在浏览器缓存的版本号键名</td> <td style="text-align:center;">vue3ElementDictVersion</td></tr> <tr><td style="text-align:center;">dictDataKey</td> <td style="text-align:center;">String</td> <td style="text-align:center;">否</td> <td style="text-align:left;">在浏览器缓存的字典数据键名</td> <td style="text-align:center;">vue3ElementDictData</td></tr> <tr><td style="text-align:center;">query</td> <td style="text-align:center;">String</td> <td style="text-align:center;">否</td> <td style="text-align:left;">请求字典接口的参数名</td> <td style="text-align:center;">dictType</td></tr> <tr><td style="text-align:center;">format</td> <td style="text-align:center;">Object</td> <td style="text-align:center;">否</td> <td style="text-align:left;">配置字典值和显示 字段的配置项  需同时配置 不可只配一个</td> <td style="text-align:center;">{label: &quot;label&quot;, value: &quot;value&quot;}</td></tr> <tr><td style="text-align:center;">formatterDictList</td> <td style="text-align:center;">Function</td> <td style="text-align:center;">否</td> <td style="text-align:left;">data为请求字典接口后返回的data数据 格式化返回字典数据，此处return的为字典数据，用于兼容返回的数据结构与默认不一致问题， 选传 默认返回  data.dictData query为请求的字典类型的参数，用于部分接口不按要求，没返回 dictType: [{},{}] 数据结构的形式，此时可利用query自行拼凑成符合的数据格式</td> <td style="text-align:center;">(data, query) =&gt; {return data.dictData}</td></tr> <tr><td style="text-align:center;">formatterDictVersion</td> <td style="text-align:center;">Function</td> <td style="text-align:center;">否</td> <td style="text-align:left;">data为请求字典接口后返回的data数据 格式化返回版本号，用于兼容返回的数据结构与默认不一致问题 默认返回 data.dictVersion 获取到版本号后会 与字典包配置的版本号进行比对</td> <td style="text-align:center;">(data) =&gt; {return data.dictVersion}</td></tr> <tr><td style="text-align:center;">filterDataFun</td> <td style="text-align:center;">Function</td> <td style="text-align:center;">否</td> <td style="text-align:left;">可对返回的字典数据进行过滤 list为某字典类型的数据</td> <td style="text-align:center;">（list) =&gt; {return list}</td></tr> <tr><td style="text-align:center;">disabledDataFun</td> <td style="text-align:center;">Function</td> <td style="text-align:center;">否</td> <td style="text-align:left;">可对返回的字典数据配置禁用字段 list为某字典类型的数据</td> <td style="text-align:center;">(list) =&gt; {return list}</td></tr> <tr><td style="text-align:center;">formatterRequest</td> <td style="text-align:center;">Function</td> <td style="text-align:center;">否</td> <td style="text-align:left;">兼格式化请求体，用于兼容接口需要的参数格式，默认dictType为空时 获取全部字典数据，接口需要获取多种字典数据时不同后端开发人员可能需要的格式不一样，因此此处可配置成后端开发人员需要的格式</td> <td style="text-align:center;">(query, dictType) =&gt; {if(!dictType){return { [query]: &quot;&quot; }} return { [query]: dictType }}</td></tr> <tr><td style="text-align:center;">storage</td> <td style="text-align:center;">storage</td> <td style="text-align:center;">否</td> <td style="text-align:left;">数据缓存的位置 默认 localstorage 可选为 sessionstorage 兼容</td> <td style="text-align:center;">localstorage</td></tr> <tr><td style="text-align:center;">usuallyGetFileds</td> <td style="text-align:center;">String</td> <td style="text-align:center;">否</td> <td style="text-align:left;">经常用到的字典数据，一进项目就会对缓存字典中无此类型的字典数据进行请求，此配置项在iframe项目中能发挥更大作用，进页面就一次性将全部字典数据一个接口请求掉，避免同时请求太多字典接口 宣传 默认空  多个字典以  英文逗号隔开 如 sex,personType</td> <td style="text-align:center;">&quot;&quot;</td></tr> <tr><td style="text-align:center;">isGetAll</td> <td style="text-align:center;">Boolean</td> <td style="text-align:center;">否</td> <td style="text-align:left;">获取所有字典类型接口 无传值获取所有字典接口，如果无传与真实需要获取全部字典接口的入参不一致 可配置 formatterRequest</td> <td style="text-align:center;">false</td></tr> <tr><td style="text-align:center;">getDictEveryTime</td> <td style="text-align:center;">Boolean</td> <td style="text-align:center;">否</td> <td style="text-align:left;">是否每次进项目都请求 usuallyGetFileds 字典类型的接口 或者获取所有字典类型接口</td> <td style="text-align:center;">false</td></tr> <tr><td style="text-align:center;">treeSetting</td> <td style="text-align:center;">Object</td> <td style="text-align:center;">否</td> <td style="text-align:left;">树形相关数据配置</td> <td style="text-align:center;">继续阅读文档</td></tr></tbody></table> <p><strong>localDictCodes的格式及字典数据的的格式如下</strong></p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token constant">SEX</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      value<span class="token operator">:</span> <span class="token string">&quot;1&quot;</span><span class="token punctuation">,</span>
      label<span class="token operator">:</span> <span class="token string">&quot;男&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      value<span class="token operator">:</span> <span class="token string">&quot;2&quot;</span><span class="token punctuation">,</span>
      label<span class="token operator">:</span> <span class="token string">&quot;女&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      value<span class="token operator">:</span> <span class="token string">&quot;3&quot;</span><span class="token punctuation">,</span>
      label<span class="token operator">:</span> <span class="token string">&quot;未知&quot;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  niceOrBad<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token string-property property">&quot;value&quot;</span><span class="token operator">:</span> <span class="token string">&quot;0&quot;</span><span class="token punctuation">,</span>
      <span class="token string-property property">&quot;label&quot;</span><span class="token operator">:</span> <span class="token string">&quot;好&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      <span class="token string-property property">&quot;value&quot;</span><span class="token operator">:</span> <span class="token string">&quot;1&quot;</span><span class="token punctuation">,</span>
      <span class="token string-property property">&quot;label&quot;</span><span class="token operator">:</span> <span class="token string">&quot;差&quot;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  area<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token string-property property">&quot;id&quot;</span><span class="token operator">:</span> <span class="token string">&quot;110000&quot;</span><span class="token punctuation">,</span>
      <span class="token string-property property">&quot;parentId&quot;</span><span class="token operator">:</span> <span class="token string">&quot;0&quot;</span><span class="token punctuation">,</span>
      <span class="token string-property property">&quot;label&quot;</span><span class="token operator">:</span> <span class="token string">&quot;北京&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token string-property property">&quot;id&quot;</span><span class="token operator">:</span> <span class="token string">&quot;110100&quot;</span><span class="token punctuation">,</span>
      <span class="token string-property property">&quot;parentId&quot;</span><span class="token operator">:</span> <span class="token string">&quot;0&quot;</span><span class="token punctuation">,</span>
      <span class="token string-property property">&quot;label&quot;</span><span class="token operator">:</span> <span class="token string">&quot;北京市&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token string-property property">&quot;id&quot;</span><span class="token operator">:</span> <span class="token string">&quot;110101&quot;</span><span class="token punctuation">,</span>
      <span class="token string-property property">&quot;parentId&quot;</span><span class="token operator">:</span> <span class="token string">&quot;110100&quot;</span><span class="token punctuation">,</span>
      <span class="token string-property property">&quot;areaName&quot;</span><span class="token operator">:</span> <span class="token string">&quot;东城区&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token string-property property">&quot;id&quot;</span><span class="token operator">:</span> <span class="token string">&quot;110102&quot;</span><span class="token punctuation">,</span>
      <span class="token string-property property">&quot;parentId&quot;</span><span class="token operator">:</span> <span class="token string">&quot;110100&quot;</span><span class="token punctuation">,</span>
      <span class="token string-property property">&quot;areaName&quot;</span><span class="token operator">:</span> <span class="token string">&quot;西城区&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token string-property property">&quot;id&quot;</span><span class="token operator">:</span> <span class="token string">&quot;110105&quot;</span><span class="token punctuation">,</span>
      <span class="token string-property property">&quot;parentId&quot;</span><span class="token operator">:</span> <span class="token string">&quot;110100&quot;</span><span class="token punctuation">,</span>
      <span class="token string-property property">&quot;areaName&quot;</span><span class="token operator">:</span> <span class="token string">&quot;朝阳区&quot;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>localDictCodes本地配置的value及label 以及 树形结构的 label及id须与dict-config中的一致</p> <p>接口返回的字段的数据也同理</p></div> <h4 id="treesetting配置"><a href="#treesetting配置" class="header-anchor">#</a> treeSetting配置</h4> <table><thead><tr><th style="text-align:center;">字段</th> <th style="text-align:center;">类型</th> <th style="text-align:center;">必传</th> <th>说明</th> <th style="text-align:center;">默认值</th></tr></thead> <tbody><tr><td style="text-align:center;">idField</td> <td style="text-align:center;">String</td> <td style="text-align:center;">否</td> <td>树形数据值的键名</td> <td style="text-align:center;">id</td></tr> <tr><td style="text-align:center;">parentIdField</td> <td style="text-align:center;">String</td> <td style="text-align:center;">否</td> <td>父节点的键名</td> <td style="text-align:center;">parentId</td></tr> <tr><td style="text-align:center;">childrenField</td> <td style="text-align:center;">String</td> <td style="text-align:center;">否</td> <td>生成的树形结构子节点的字段名</td> <td style="text-align:center;">children</td></tr> <tr><td style="text-align:center;">firstId</td> <td style="text-align:center;">String，Number</td> <td style="text-align:center;">否</td> <td>根节点的值</td> <td style="text-align:center;">“0”</td></tr> <tr><td style="text-align:center;">labelField</td> <td style="text-align:center;">String</td> <td style="text-align:center;">否</td> <td>显示的值的字段名</td> <td style="text-align:center;">label</td></tr> <tr><td style="text-align:center;">labelArrField</td> <td style="text-align:center;">String</td> <td style="text-align:center;">否</td> <td>字典包会将数组转化为树形结构数据 并每一项生成 labelArr字段，内容为【爷爷级/父级label,...,自己的label】</td> <td style="text-align:center;">labelArr</td></tr> <tr><td style="text-align:center;">idArrField</td> <td style="text-align:center;">String</td> <td style="text-align:center;">否</td> <td>字典包会将数组转化为树形结构数据 并每一项生成 labelArr字段，内容为【爷爷级/父级id,...,自己的id】</td> <td style="text-align:center;">idArr</td></tr> <tr><td style="text-align:center;">levelField</td> <td style="text-align:center;">String</td> <td style="text-align:center;">否</td> <td>给对象新增的层级字段名</td> <td style="text-align:center;">level</td></tr> <tr><td style="text-align:center;">level</td> <td style="text-align:center;">Number</td> <td style="text-align:center;">否</td> <td>配置根目录的层级</td> <td style="text-align:center;">0</td></tr> <tr><td style="text-align:center;">leafField</td> <td style="text-align:center;">String</td> <td style="text-align:center;">否</td> <td>是否叶子节点的字段名 值为boolean</td> <td style="text-align:center;">leaf</td></tr></tbody></table> <h4 id="在main-ts中的使用"><a href="#在main-ts中的使用" class="header-anchor">#</a> 在main.ts中的使用</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;vue&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">&quot;./App.vue&quot;</span><span class="token punctuation">;</span>
<span class="token comment">// 引入组件库</span>
<span class="token keyword">import</span> ElementPlus <span class="token keyword">from</span> <span class="token string">'element-plus'</span>
<span class="token keyword">import</span> <span class="token string">'element-plus/dist/index.css'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>getGlobalConfigApi<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;@/api/modules/common-api.ts&quot;</span>

<span class="token keyword">import</span> router <span class="token keyword">from</span> <span class="token string">'./router'</span>
<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">createApp</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span><span class="token punctuation">;</span>
app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>router<span class="token punctuation">)</span>
app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>ElementPlus<span class="token punctuation">)</span>
<span class="token comment">// 引入图标库</span>
<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> ElementPlusIconsVue <span class="token keyword">from</span> <span class="token string">'@element-plus/icons-vue'</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> <span class="token punctuation">[</span>key<span class="token punctuation">,</span> component<span class="token punctuation">]</span> <span class="token keyword">of</span> Object<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span>ElementPlusIconsVue<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  app<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> component<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 引入字典包配置</span>
<span class="token keyword">import</span> dictConfig <span class="token keyword">from</span> <span class="token string">&quot;./dict-config&quot;</span>
<span class="token keyword">import</span> vue3ElementDict <span class="token keyword">from</span> <span class="token string">&quot;vue3-element-dict&quot;</span><span class="token punctuation">;</span>

<span class="token function">getGlobalConfigApi</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>data <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  dictConfig<span class="token punctuation">.</span>version <span class="token operator">=</span> data<span class="token punctuation">.</span>dictVersion
  app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>vue3ElementDict<span class="token punctuation">,</span> dictConfig<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//注册</span>
  app<span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">&quot;#app&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div><p>至此已全部配置完成，就可以轻松使用了。</p> <!----> <h2 id="常见问题"><a href="#常见问题" class="header-anchor">#</a> 常见问题</h2> <ol><li><p>后端无返回版本号时怎么办。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/* 
答：当后端无返回版本号时，可将版本号写死固定，如0.0.1，且使用formatterDictVersion格式化返回版本号数据写死 0.0.1（必须和前面一致）。

具体使用方法 如下：
*/</span>

<span class="token comment">//  src/api/modules/common-api.ts</span>
<span class="token comment">//获取全局配置  包含版本号</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getGlobalConfigApi</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">dictVersion</span><span class="token operator">:</span> <span class="token string">&quot;0.0.1&quot;</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">// src/dict-config.js 文件</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>getDictCodeApi<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;@/api/module/common-api.ts&quot;</span>
<span class="token keyword">import</span> localDictCodes <span class="token keyword">from</span> <span class="token string">&quot;@/assets/data/dict.ts&quot;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    getDictCodeApi<span class="token punctuation">,</span> <span class="token comment">//必传 获取字典数据接口</span>
    localDictCodes<span class="token punctuation">,</span> <span class="token comment">//选填 项目写死的字典数据</span>
    <span class="token function-variable function">formatterDictVersion</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">//data为 经过 axios 响应处理后返回的 第一级数据</span>
        <span class="token keyword">return</span> <span class="token string">&quot;0.0.1&quot;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">//以上操作即可解决后端接口无返回版本号问题，实现方法很多，以上方法为遵循文档推荐代码的解决方式</span>
</code></pre></div></li> <li><p>后端字典接口正常请求，但是返回数据与文档要求格式不一致怎么办？</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/*
答：此包拥有诸多配置，面对后端人员不配合修改接口返回格式时，部门字典包无能为力。此包就针对这个问题，实现对接口返回数据进行操作。让各种各样的接口数据经过您优秀的数据操作，都能适配此字典包。

具体如下：
*/</span>

<span class="token comment">// src/dict-config.js 文件</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>getDictCodeApi<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;@/api/module/common-api.js&quot;</span>
<span class="token keyword">import</span> localDictCodes <span class="token keyword">from</span> <span class="token string">&quot;@/assets/data/dict.js&quot;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    getDictCodeApi<span class="token punctuation">,</span> <span class="token comment">//必传 获取字典数据接口</span>
    localDictCodes<span class="token punctuation">,</span> <span class="token comment">//选填 项目写死的字典数据</span>
    <span class="token function-variable function">formatterDictList</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> query</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">//data为 经过 axios 响应处理后返回的 第一级数据</span>
        <span class="token keyword">const</span> dictCodeList <span class="token operator">=</span> 一系列操作后 <span class="token operator">...</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
        <span class="token keyword">return</span> dictCodeList
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>后端请求格式与字典包要求的不一致怎么办？</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/*
答：此包拥有诸多配置，面对后端人员不愿意修改请求参数来适配字典包，部门字典包无能为力。此包就针对这个问题，实现对请求参数数据进行操作。让请求参数能适配此字典包。

具体如下：
*/</span>

<span class="token comment">// src/dict-config.js 文件</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>getDictCodeApi<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;@/api/module/common-api.js&quot;</span>
<span class="token keyword">import</span> localDictCodes <span class="token keyword">from</span> <span class="token string">&quot;@/assets/data/dict.js&quot;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    getDictCodeApi<span class="token punctuation">,</span> <span class="token comment">//必传 获取字典数据接口</span>
    localDictCodes<span class="token punctuation">,</span> <span class="token comment">//选填 项目写死的字典数据</span>
    <span class="token function-variable function">formatterRequest</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">query<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">//query 为字典类型参数   如  type: &quot;AAC004&quot; 中的type</span>
        <span class="token comment">//data  为字典类型数据   如  type: &quot;AAC004&quot; 中的AAC004</span>
        <span class="token keyword">const</span> req <span class="token operator">=</span> 一系列操作后 <span class="token operator">...</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
        <span class="token keyword">return</span> req
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>此字典组件使用后会调用多次接口且每个接口只请求一个字典类型的数据，能让他们在同个接口请求？</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/*
答：针对这个问题，此包已经有预判到了，所以有个usuallyGetFileds配置项，用来配置经常请求的字典类型，这种情况下，这些字典数据就会在同个接口请求。当然如果在整个项目上或多或少 会有部分字典数据 不在usuallyGetFileds范畴内。不过此字段已经大大的解决了您的问题。
如果是项目是供iframe作为单个功能页使用，可将页面上所有使用到的字典数据配置起来就能完全达到您的要求。
*/</span>
</code></pre></div></li> <li><p>后端接口返回数据格式一致，但是字段名不一致，我该如何处理？</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/*
答：format配置项可以解决您的问题。
具体如下
*/</span>

<span class="token comment">// src/dict-config.js 文件</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>getDictCodeApi<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;@/api/module/common-api.js&quot;</span>
<span class="token keyword">import</span> localDictCodes <span class="token keyword">from</span> <span class="token string">&quot;@/assets/data/dict.js&quot;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    getDictCodeApi<span class="token punctuation">,</span> <span class="token comment">//必传 获取字典数据接口</span>
    localDictCodes<span class="token punctuation">,</span> <span class="token comment">//选填 项目写死的字典数据</span>
    <span class="token literal-property property">format</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&quot;后端返回的value&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&quot;后端返回的label&quot;</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</code></pre></div></li></ol></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">5/12/2023, 1:10:57 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/vue3-element-dict/guide/directory-structure/" class="prev">
        目录结构
      </a></span> <span class="next"><a href="/vue3-element-dict/components/el-select-dict/">
        select-dict选择器
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><div id="loading-mask"><div class="loading-wrapper"><span class="loading-dot loading-dot-spin"><i></i> <i></i> <i></i> <i></i></span></div></div><!----></div></div>
    <script src="/vue3-element-dict/assets/js/app.a8f3ef49.js" defer></script><script src="/vue3-element-dict/assets/js/4.2b31fab0.js" defer></script><script src="/vue3-element-dict/assets/js/34.66b713bf.js" defer></script>
  </body>
</html>
